<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#FFFFFF',
		navigationBarTextStyle: 'black',
		backgroundColor: '#FFFFFF',
		navigationBarTitleText: '倍阅共读计划',
	},
}
</route>
<template>
	<view class="page-ranking">
		<scroll-view scroll-y class="w-full box-border" :style="{ height: contentHeight + 'rpx' }">
			<view class="w-full py-4">
				<view class="w-full flex justify-between items-center px-4 box-border mb-2">
					<view class="flex items-center">
						<view
							@tap="choseTab('all')"
							class="h-[63rpx] flex items-center justify-center px-[27rpx] text-[29rpx] rounded-[30rpx]"
							:style="{
								background: currentTab === 'all' ? '#2BA5E0' : '#F3F3F5',
								color: currentTab === 'all' ? '#fff' : '#303030',
							}"
							>参与学生<text
								class="text-[23rpx]"
								:style="{
									color: currentTab === 'all' ? '#fff' : '#2BA5E0',
								}"
								>({{ showInfo.join_list.length }})</text
							></view
						>
						<view
							@tap="choseTab('school')"
							class="h-[63rpx] flex items-center justify-center px-4 text-[32rpx] rounded-[30rpx] ml-[20rpx]"
							:style="{
								background: currentTab === 'school' ? '#2BA5E0' : '#F3F3F5',
								color: currentTab === 'school' ? '#fff' : '#303030',
							}"
							>未参与学生<text
								class="text-[23rpx]"
								:style="{
									color: currentTab === 'school' ? '#fff' : '#2BA5E0',
								}"
								>({{ showInfo.no_list.length }})</text
							></view
						>
					</view>
					<!-- <image
						:class="['w-[62rpx] h-[62rpx] rotate', sortFiled === 'desc' ? '' : 'active']"
						@tap="sort"
						:src="baseImg + '/record-filter.png'"
					></image> -->
				</view>
				<view class="w-full px-4 box-border" v-if="thisPage !== -1">
					<view class="w-full bg-white rounded-[30rpx] box-border">
						<block v-if="thisPage === 1">
							<block v-if="list.length">
								<view
									class="w-full flex justify-between items-center mb-2 ranking-item"
									v-for="item in list"
									:key="item.id"
									@tap="
										linkUrl(
											`/pages/pages-readingPlan/completionStatus/index?student_id=${item.id}&plan_id=${query.id}`,
										)
									"
								>
									<view class="flex-1 flex justify-between items-center pr-4 box-border">
										<view class="flex justify-between items-center">
											<image
												class="ranking-img"
												:src="item.avatar || baseImg + '/my/my-student.png'"
											></image>
											<view class="py-2 flex flex-col justify-between ml-3">
												<view class="text-[#303030] text-[28rpx]">
													<text>{{ item.username }}</text>
												</view>
												<!-- <view class="text-[#ABABAB] text-[21rpx] mt-1">
													<text>{{ item.school_name || '-' }}</text>
													<text class="ml-2">{{ item.grade }}{{ item.class_name }}</text>
												</view> -->
											</view>
										</view>
										<view class="flex items-center text-[#ABABAB] text-[21rpx]"
											>学习进度<text
												class="text-[#303030] text-[35rpx] ml-2 font-bold"
												:style="{ color: item.progress === 100 ? '#F9BE20' : '#303030' }"
												>{{ item.progress || 0 }}%</text
											></view
										>
									</view>
								</view>
							</block>

							<no-page
								v-else
								class="mt-[150rpx]"
								style="float: left; width: 100%"
								title="暂无数据"
								height="100%"
								type="msg"
							></no-page>
						</block>
						<view class="mt-[150rpx]">
							<no-page
								v-if="thisPage === 0"
								:title="title"
								height="100%"
								:type="type"
								:btnTitle="btnTitle"
								@retry="retry"
							></no-page
						></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<view class="classArea" v-if="query.class_name">
		<view class="lef">
			<img :src="query.avatar" alt="" />
			<view class="title">
				<view class="up">{{ query.class_name }}</view>
				<view class="dow">
					<text class="join">{{ query.join_total }}人参与</text
					><text class="no-join">{{ query.nojoin_total }}人未参与</text>
					<text class="complete">{{ query.complete_total }}人完成</text>
				</view>
			</view>
		</view>
		<view class="rig">
			总完成率
			<text>{{ query.progress }}%</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';
import { getPlanParticiRecord } from '@/service/plan';
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { toAuthPage } from '@/utils/jump';
import { useUserStore } from '@/store';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const type = ref('msg');
const btnTitle = ref('重试');
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();

const query = ref(null);
const currentTab = ref('all');
const showInfo = ref({ join_list: [], no_list: [] });
const list = ref([]);
const thisPage = ref(-1);
const title = ref('');
const sortFiled = ref('desc'); // asc

const linkUrl = (url = '') => {
	if (!url) return;
	uni.navigateTo({ url });
};
onLoad(options => {
	if (options) {
		query.value = options;
	}
});

onShow(() => {
	if (!userInfo.value.school_id) {
		// 分享或者进入未登录
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '还没有登录';
		btnTitle.value = '登录';
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	if (query.value.id) {
		getRanking();
	} else {
		thisPage.value = 0;
		title.value = '查询失败';
	}
});

watch(currentTab, newValue => {
	if (newValue === 'all') {
		list.value = showInfo.value.join_list;
	} else {
		list.value = showInfo.value.no_list;
	}
});

const choseTab = tab => {
	currentTab.value = tab;
};

const sort = () => {
	sortFiled.value = sortFiled.value === 'desc' ? 'asc' : 'desc';
	getRanking();
};

const getRanking = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getPlanParticiRecord({ id: query.value.id, sort: sortFiled.value });
		uni.hideLoading();
		if (res.status_code === 200) {
			thisPage.value = 1;
			showInfo.value = res.data;
			if (currentTab.value === 'all') {
				list.value = res.data.join_list;
			} else {
				list.value = res.data.no_list;
			}
		} else {
			type.value = 'btn';
			thisPage.value = 0;
			list.value = [];
			showInfo.value = { join_list: [], no_list: [] };
			title.value = res.message;
		}
	} catch (error) {
		type.value = 'btn';
		list.value = [];
		showInfo.value = { join_list: [], no_list: [] };
		thisPage.value = 0;
		uni.hideLoading();
		title.value = '暂无数据';
	}
};

const retry = () => {
	getRanking();
};
</script>

<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.page-ranking {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;

	.ranking-img {
		width: 75rpx;
		height: 75rpx;
		background: #dbdbdb;
		border: 2rpx solid #f3f1f3;
		border-radius: 50%;
	}

	.ranking-item:last-child {
		margin-bottom: 0;
	}

	.ranking-rule {
		background: #62baf9;
	}

	.ranking-point {
		background: #f3f3f5;
	}

	.rule-modal {
		background: linear-gradient(0deg, #fff, #aac6f8);
	}

	.rule-box {
		max-height: 700rpx;
		overflow-y: auto;
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 0rpx 14rpx 0rpx rgb(0 0 0 / 7%);
	}

	.rotate {
		transition: transform 0.2s;

		&.active {
			transform: rotate(180deg);
		}
	}
}
.classArea {
	position: fixed;
	bottom: 0;
	left: 0;
	background: #ffffff;
	height: 170rpx;
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgba(0, 0, 0, 0.03),
		0rpx 5rpx 21rpx 0rpx rgba(0, 0, 0, 0.07);
	padding: 31rpx 69rpx 47rpx 46rpx;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	.lef {
		display: flex;
		align-items: center;
	}
	image {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		border: 6rpx solid #ffffff;
	}
	.title {
		padding-left: 20rpx;
		.up {
			font-size: 28rpx;
			color: #303030;
			padding-bottom: 28rpx;
		}
		.dow {
			line-height: 0;
			text {
				font-size: 21rpx;
				&.join {
					color: #34a4e2;
				}
				&.no-join {
					color: #ababab;
				}
				&.complete {
					color: #45c752;
				}
			}
		}
	}
	.rig {
		font-size: 21rpx;
		color: #303030;
		text {
			font-size: 35rpx;
		}
	}
}
</style>
